<div *ngIf="test | async as test">
  <div *ngIf="service | async as service">
    <div class="container-fluid breadcrumb-bar">
      <div class="row">
        <ol class="breadcrumb">
          <li><a [routerLink]="['/services']">Services &amp; APIs</a></li>
          <li><a [routerLink]="['/services', service.id]">{{ service.name }} - {{ service.version }}</a></li>
          <li><a [routerLink]="['/tests/service', service.id]">Tests History</a></li>
          <li>Test #{{ test.testNumber }}</li>
        </ol>
      </div>
    </div>

    <h1>Test {{ test.id }}
      <div class="pull-right">
        <button class="btn btn-warning" (click)="openAddToCI()">
          <span class="pficon pficon-in-progress"></span> Add to your CI/CD
        </button>
      </div>
    </h1>
    <small>Created {{ test.testDate.toString() | timeAgo }}, ran on {{ test.testDate | date:'medium' }}</small>

    <h3 class="section-label">Properties</h3>

    <div class="row">
      <div class="col-md-8">
        <dl class="dl-horizontal left">
          <dt>Test Number:</dt>
          <dd>#{{ test.testNumber }}</dd>
          <dt>Tested API or Service:</dt>
          <dd><a [routerLink]="['/services', service.id]">{{ service.name }} - {{ service.version }}</a></dd>
          <dt>Tested Endpoint:</dt>
          <dd><code>{{ test.testedEndpoint }}</code></dd>
          <span *ngIf="test.secretRef">
            <dt>Secret:</dt>
            <dd>{{ test.secretRef.name }}</dd>
          </span>
          <span *ngIf="test.authorizedClient">
            <dt>OAuth2 client:</dt>
            <dd>
              <code>{{ test.authorizedClient.principalName }}</code> principal<br/>
              <code>{{ test.authorizedClient.tokenUri }}</code> tokenUri<br/>
              <code>{{ test.authorizedClient.grantType }}</code> grant<br/>
              <code *ngIf="test.authorizedClient.scopes">{{ test.authorizedClient.scopes }}</code> scopes
            </dd>
          </span>
        </dl>
      </div>
      <div class="col-md-4">
        <i *ngIf="test.inProgress && !timedOut(test)" class="fa fa-2x fa-fw fa-refresh fa-spin"></i>
        <i *ngIf="!test.inProgress && test.success" class="fa fa-2x fa-fw fa-check-circle"></i> 
        <i *ngIf="!test.inProgress && !test.success" class="fa fa-2x fa-fw fa-times-circle"></i>
        <i *ngIf="timedOut(test)" class="fa fa-2x fa-fw fa-clock-o"></i>
        <span class="label label-info">{{ displayTestType(test.runnerType) }}</span>
      </div>
    </div>

    <div>
      <h3 class="section-label">Results</h3>
    </div>

    <div class="container-fluid">
      <pfng-list id="resultsList"
          [config]="resultsListConfig"
          [expandTemplate]="resultDetailTemplate"
          [items]="test.testCaseResults"
          [itemTemplate]="resultTemplate">

        <ng-template #resultTemplate let-item="item" let-index="index">
          <div class="list-pf-left">
          </div>
          <div class="list-pf-content-wrapper">
            <div class="list-pf-main-content">
              <div class="list-pf-title">{{ item.operationName }}</div>
              <div class="list-pf-description text-overflow-pf">
                <div>
                  <span class="pficon pficon-image"> </span>
                  <strong>  {{ item.testStepResults.length }}</strong> test(s)
                </div>
              </div>
            </div>
            <div class="list-pf-additional-content">
              <div>
                <i *ngIf="test.inProgress && !timedOut(test)" class="fa fa-fw fa-refresh fa-spin"></i>
                <i *ngIf="item.success && item.elapsedTime > 0" class="fa fa-fw fa-check-circle"></i>
                <i *ngIf="!item.success  && item.elapsedTime > -1" class="fa fa-fw fa-times-circle"></i>
                <i *ngIf="item.elapsedTime == -1 && timedOut(test)" class="fa fa-fw fa-clock-o"></i>
                <span class="time-elapsed">in {{ item.elapsedTime }} ms</span>
              </div>
            </div>
          </div>
        </ng-template>

        <ng-template #resultDetailTemplate let-item="item" let-index="index">
          <tabset>
            <tab *ngFor="let testStep of item.testStepResults" heading="{{ testStep.requestName || testStep.eventMessageName }}">
              <ng-template tabHeading>
                <i *ngIf="test.inProgress && testStep.success === undefined" class="fa fa-fw fa-refresh fa-spin"></i>
                <i *ngIf="testStep.success" class="fa fa-fw fa-check-circle"></i>
                <i *ngIf="!testStep.success" class="fa fa-fw fa-times-circle"></i>
              </ng-template>
              <div class="row" *ngIf="testMessages[encode(item.operationName)]">  
                <div class="col-md-6" *ngIf="service.type != 'EVENT'">
                  <h5 class="subsection-label">Request</h5>

                  <pre *ngIf="messagePairFor(item.operationName, testStep.requestName).request.content" class="hljs"><code [highlightAuto]="messagePairFor(item.operationName, testStep.requestName).request.content" [languages]="hlLang"></code></pre>
                  <table class="table table-condensed" width="100%" *ngIf="messagePairFor(item.operationName, testStep.requestName).request.headers">
                    <thead>
                      <tr>
                        <th>Header name</th>
                        <th>Values</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let header of messagePairFor(item.operationName, testStep.requestName).request.headers">
                        <td>{{ header.name }}</td>
                        <td style="max-width:200px; word-wrap:break-word"><span *ngFor="let v of header.values; let last = last">{{ v }}{{ last ? '':', '}}</span></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="col-md-6" *ngIf="service.type != 'EVENT'">
                  <h5 class="subsection-label">Response</h5>

                  <dl class="dl-horizontal left" *ngIf="messagePairFor(item.operationName, testStep.requestName).response">
                    <dt>Response Time:</dt>
                    <dd>{{ testStep.elapsedTime }} ms.</dd>
                    <span *ngIf="messagePairFor(item.operationName, testStep.requestName).response.status">
                      <dt>Response Code and Type:</dt>
                      <dd>
                        <code><small>{{ messagePairFor(item.operationName, testStep.requestName).response.status }}: {{messagePairFor(item.operationName, testStep.requestName).response.mediaType}}</small></code>
                      </dd>
                    </span>
                    <span *ngIf="testStep.message">
                      <dt>Error:</dt>
                      <dd>
                        <code class="code-block">{{ formatErrorMessage(testStep.message) }}</code>
                      </dd>
                    </span>
                  </dl>
                  <pre *ngIf="messagePairFor(item.operationName, testStep.requestName).response.content" class="hljs"><code [highlightAuto]="messagePairFor(item.operationName, testStep.requestName).response.content" [languages]="hlLang"></code></pre>
                  <table class="table table-condensed" width="100%" *ngIf="messagePairFor(item.operationName, testStep.requestName).response.headers">
                    <thead>
                      <tr>
                        <th>Header name</th>
                        <th>Values</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let header of messagePairFor(item.operationName, testStep.requestName).response.headers">
                        <td>{{ header.name }}</td>
                        <td style="max-width:200px; word-wrap:break-word"><span *ngFor="let v of header.values; let last = last">{{ v }}{{ last ? '':', '}}</span></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="col-md-12" *ngIf="service.type === 'EVENT'">
                  <h5 class="subsection-label">Event Message</h5>

                  <dl class="dl-horizontal left" *ngIf="eventMessageFor(item.operationName, testStep.eventMessageName).eventMessage">
                    <dt>Consumption Time:</dt>
                    <dd>{{ testStep.elapsedTime }} ms.</dd>
                    <span *ngIf="eventMessageFor(item.operationName, testStep.eventMessageName).eventMessage.mediaType">
                      <dt>Event Type:</dt>
                      <dd>
                        <code>{{ eventMessageFor(item.operationName, testStep.eventMessageName).eventMessage.mediaType }}</code>
                      </dd>
                    </span>
                    <span *ngIf="testStep.message">
                      <dt>Error:</dt>
                      <dd>
                        <code class="code-block">{{ formatErrorMessage(testStep.message) }}</code>
                      </dd>
                    </span>
                  </dl>
                  <pre *ngIf="eventMessageFor(item.operationName, testStep.eventMessageName).eventMessage.content" class="hljs"><code [highlightAuto]="eventMessageFor(item.operationName, testStep.eventMessageName).eventMessage.content" [languages]="hlLang"></code></pre>
                  <table class="table table-condensed" width="100%" *ngIf="eventMessageFor(item.operationName, testStep.eventMessageName).eventMessage.headers">
                    <thead>
                      <tr>
                        <th>Header name</th>
                        <th>Values</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let header of eventMessageFor(item.operationName, testStep.eventMessageName).eventMessage.headers">
                        <td>{{ header.name }}</td>
                        <td style="max-width:200px; word-wrap:break-word"><span *ngFor="let v of header.values; let last = last">{{ v }}{{ last ? '':', '}}</span></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </tab>
          </tabset>
        </ng-template>
      </pfng-list>
    </div>
  </div>
</div>